<template>
    <van-cell class="article-item" :to="{name:'article',params:{articleId:props.article.id}}">

        <template #title>
<span class="title van-ellipsis" >{{ article.title }}</span>
        </template>
        <template #label >
            <div v-if="article.type===3" class="cover-wrap">
            <div v-for="(img,index) in article.images" :key="index" class="cover-item">
            <van-image width="100" height="100" :src="`http://localhost:3005` + img"></van-image>
            </div>
            </div>
            <span>{{ article.aut_name }}</span>
            <span class="label-bottom">{{ article.comm_count }}评论数</span>
            <span>{{ dayjs().to(dayjs(article.pubdate))    }}</span>
        </template>

        <template #right-icon>
            <van-image height="100" width="100"
            :src="`http://localhost:3005` + article.images[0]"
            v-if="article.type===1"
            ></van-image>

        </template>
    </van-cell>
</template>

<script setup>
import dayjs from "../utils/day"
import {defineProps} from 'vue'
 const props=   defineProps({
    article:{
        type:Object,
        required:true
    }
 })

</script>

<style>
.article-item .title {
  font-size: 20px;
  color: #3a3a3a;
}
.article-item .van-cell__value {
  flex: unset;
  width: 232px;
  height: 146px;
  padding-left: 25px;
}
.article-item .right-cover {
  width: 132px;
  height: 146px;
}

.article-item .label-info-wrap span {
  font-size: 14px;
  color: #b4b4b4;
  margin-right: 25px;
}
.article-item .cover-wrap {
  display: flex;
}
.article-item .cover-wrap .cover-item {
  /* 平分宽度 */
  flex: 1;
  padding-right: 4px;
}
 .label-bottom {
    padding:0px 5px ;
}
</style>